<style>
@import url("/src/assets/css/swiper-4.1.0.min.css");
.gallery-top {
  height: 32rem;
  cursor: pointer;
  width: 100%;
}
.swiper-slide {
  background-size: cover;
  -webkit-background-size: cover;
  background-position: 50%;
}
.mySwiper {
  height: 340px;
}
.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
}
.bg-color-f6 {
  background-color: #f6f6f6;
}
.item {
  width: 1160px;
  margin: 0 auto;
}
.item_head {
  padding: 50px 0 20px;
  height: 45px;
}
.item_head p {
  font-size: 30px;
}
.item_head p span {
  font-size: 24px;
}
.tabnav {
  height: 100%;
}
.tabnav li,
.more_city li {
  float: left;
  margin-right: 20px;
  height: 100%;
  line-height: 57px;
  font-size: 18px;
  cursor: pointer;
}
.tabnav li.active,
.more_city li.active,
.tabnav li:hover,
.more_city li:hover {
  color: #1841b2;
  border-bottom: 2px solid #1841b2;
}
.tabnav li.lookMore {
  color: red;
  font-size: 14px;
}
.more_city li {
  line-height: 38px;
  border-bottom: 2px solid transparent;
}
.item_main li {
  float: left;
  position: relative;
  margin-right: 18px;
  height: 270px;
}
.first_msg_layer {
  position: absolute;
  width: 100%;
  height: 68px;
  line-height: 68px;
  padding: 0 15px;
  background-color: rgba(0, 0, 0, 0.75);
  bottom: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
}
.first_msg_layer .title {
  color: #fff;
  font-size: 18px;
}
.first_msg_layer .price_msg {
  font-size: 16px;
  color: #ff5130;
}
.first_msg_layer .price_msg span {
  margin-right: 10px;
}
.a_btn {
  display: inline-block;
  width: 80px;
  height: 28px;
  line-height: 28px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  background-color: #ff9330;
}
.price {
  font-size: 16px;
  color: #ff5130;
}
.item_main .other_msg {
  width: 276px;
  height: 270px;
}
.other_msg {
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}
.other_msg .text {
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  width: 274px;
  height: 98px;
  padding: 0 15px;
  margin-top: -4px;
}
.other_msg .title {
  color: #000;
  height: 55px;
  line-height: 55px;
}
.other_msg .bottom {
  position: absolute;
  width: 100%;
  height: 28px;
  bottom: 15px;
  left: 0;
  box-sizing: border-box;
  padding: 0 15px;
}
.item li {
  margin-bottom: 20px;
}
.item .other_msg:nth-of-type(3) {
  margin-right: 0;
}
.item .other_msg.more {
  margin-right: 0;
}
.item .more {
  background-image: -webkit-linear-gradient(250deg, #df91ff, #385ab5);
  background-image: -o-linear-gradient(250deg, #df91ff 0, #385ab5 100%);
  background-image: -moz-linear-gradient(250deg, #df91ff 0, #385ab5 100%);
  background-image: linear-gradient(250deg, #df91ff, #385ab5);
}
.item .more div {
  position: relative;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  top: 50%;
  text-align: center;
}
.item .more img {
  width: 78px;
  height: 78px;
  margin-bottom: 30px;
}
.item .more p {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}
.item .more.trans {
  background-image: -webkit-linear-gradient(-250deg, #38b5a3, #91ff98);
  background-image: -o-linear-gradient(-250deg, #38b5a3 0, #91ff98 100%);
  background-image: -moz-linear-gradient(-250deg, #38b5a3 0, #91ff98 100%);
  background-image: linear-gradient(-250deg, #38b5a3, #91ff98);
}
</style>
<template>
    <div>
        <div class="swiper-container gallery-top swiper-container-horizontal mySwiper" v-on:mouseenter="stopPlay()" v-on:mouseleave="play()"> 
            <div class="swiper-wrapper"> 
                <div v-for="value in bannerGroup" class="swiper-slide swiper-slide-next" style="width: 100%; margin-right: 10px;" :style="{backgroundImage: 'url(' + value.image + ')'}"></div> 
            </div> 
            <div class="swiper-button-next swiper-button-white" @click="next()"></div>  
            <div @click="prev()" class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- 主体部分 -->
        <div class="bg-color-f6">

            <div class="item">
                <div class="item_head">
                    <p class="fl">
                        观光飞行   <span>Air  Tour</span> 
                    </p>
                    <ul class="fr tabnav">
                        <li :class="{'active': ind==-1}" @click="cityTab('tours')">全部</li>
                        <li v-for="(item,index) in toursArr" v-if="index<5" v-html="item.city"  :class="ind==index?'active':''" @click="cityTab('tours',index,item.city)"></li>
                        <li class="lookMore" v-if="toursArr.length>5" @click="moreShow=!moreShow" v-html="moreShow?'收起更多>':'查看更多>'"></li>
                        <!-- ,'myActive':ind==index && bool==true -->
                    </ul>
                    <div class="clear"></div>
                </div>
                <ul class="more_city" v-if="moreShow">
                    <li v-for="(item,index) in toursArr" v-if="index>=5" :class="{'active':ind==index}"  v-html="item.city" @click="cityTab('tours',index,item.city)"></li>
                    <div class="clear"></div>
                </ul>
                <ul class="item_main">
                  <li class="first_msg" v-for="(item,index) in toursMsgArr" v-if="index==0">
                    <img :src="item.image" :alt="item.name"  width="570" height="270">
                    <div class="first_msg_layer">
                      <div class="title fl ellipsis" v-html="item.name">
                      </div>
                      <div class="fr price_msg">
                        <span>RMB {{item.price | myPrice}}元/人</span>
                        <a class="a_btn">立即预订</a>
                      </div>
                      <div class="clear"></div>
                    </div>
                  </li>
                  <li class="other_msg" v-else-if="index<6">
                    <img :src="item.image" :alt="item.name" width="274" height="170">
                    <div class="text">
                      <p class="title ellipsis" v-html="item.name"></p>
                      <div class="bottom">
                        <span class="price">RMB {{item.price | myPrice}}元/人</span>
                        <a class="a_btn fr">立即预订</a>
                      </div>
                    </div> 
                  </li>
                  <li class="other_msg more" v-if="toursMsgArr.length>6">
                    <div class="look_more">
                      <router-link to="/fxpx">
                            <img src="/src/assets/airjet_more.png">
                            <p>进入观光飞行</p>
                            <p>查看更多产品</p>
                      </router-link>
                    </div>
                  </li>
                  <div class="clear"></div>
                </ul>
                <div class="loading" v-if="!!loadShow">
                  <span></span><span></span><span></span>
                </div>
            </div>
            <!-- 通勤航旅 -->
            <div class="item">
                <div class="item_head">
                    <p class="fl">
                        通勤航旅   <span>Air  Transportation</span> 
                    </p>
                    <ul class="fr tabnav">
                        <li :class="{'active': Tind==-1}" @click="cityTab('transports')">全部</li>
                        <li v-for="(item,index) in TransArr" v-if="index<5" v-html="item.name"  :class="Tind==index?'active':''" @click="cityTab('transports',index,item.id)"></li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <ul class="item_main">
                  <li class="first_msg" v-for="(item,index) in TransMsgArr" v-if="index==0">
                    <img :src="item.image" :alt="item.name"  width="570" height="270">
                    <div class="first_msg_layer">
                      <div class="title fl ellipsis" v-html="item.name"></div>
                      <div class="fr price_msg">
                        <span>RMB {{item.price | myPrice}}元/人</span>
                        <a class="a_btn">立即预订</a>
                      </div>
                      <div class="clear"></div>
                    </div>
                  </li>
                  <li class="other_msg" v-else-if="index<6">
                    <img :src="item.image" :alt="item.name" width="274" height="170">
                    <div class="text">
                      <p class="title ellipsis" v-html="item.name"></p>
                      <div class="bottom">
                        <span class="price">RMB {{item.price | myPrice}}元/人</span>
                        <a class="a_btn fr">立即预订</a>
                      </div>
                    </div> 
                  </li>
                  <li class="other_msg more trans" v-if="TransMsgArr.length>6">
                    <div class="look_more">
                      <router-link to="/tqhl">
                            <img src="/src/assets/airjet_more.png">
                            <p>进入通勤航旅</p>
                            <p>查看更多产品</p>
                      </router-link>
                    </div>
                  </li>
                  <div class="clear"></div>
                </ul>
            </div>

        </div>
    </div> 
</template>
<script>
import Swiper from "../static/swiper-4.1.0.min.js";
let galleryTop;
let galleryThumbs;
export default {
  data() {
    return {
      bannerGroup: [],
      toursArr: [],
      moreShow: false,
      ind: -1,
      toursMsgArr: [],
      tourAllMsg: [],

      // 通勤航旅
      Tind: -1,
      TransArr: [],
      TransMsgArr: [],
      TransAllMsg: [],
      loadShow: true
    };
  },
  methods: {
    stopPlay() {
      galleryTop.autoplay.disableOnInteraction = true;
    },
    play() {
      galleryTop.autoplay.disableOnInteraction = false;
    },
    next() {
      galleryTop.slideNext();
    },
    prev() {
      galleryTop.slidePrev();
    },
    // 获取轮播图数据
    getBanner() {
      this.$http.get(this.myUrl + "banners").then(
        response => {
          this.bannerGroup = response.data;
          setTimeout(() => {
            galleryTop = new Swiper(".gallery-top", {
              autoplay: {
                disableOnInteraction: false,
                delay: 2500
              },
              grabCursor: false,
              initialSlide: 1,
              pagination: {
                el: ".swiper-pagination",
                clickable: true
              }
            });
            galleryTop.params.control = galleryThumbs;
          }, 500);
        },
        response => {
          //失败分支
          console.log(response);
        }
      );
    },
    // 观光飞行导航栏
    tours() {
      this.$http.get(this.myUrl + "tours/flight/cities").then(
        response => {
          this.toursArr = response.data.map(function(val) {
            const obj = {};
            obj.bool = false;
            obj.city = val;
            return obj;
          });
        },
        response => {
          //失败分支
          console.log(response);
        }
      );
    },
    // 观光飞行信息
    getToursMsg() {
      this.$http.get(this.myUrl + "tours").then(
        response => {
          this.toursMsgArr = response.data.content;
          this.tourAllMsg = response.data.content;
          this.loadShow=false;
        },
        response => {
          //失败分支
          console.log(response);
        }
      );
    },
    // 通勤航旅导航栏
    getTransNav() {
      this.$http.get(this.myUrl + "transports/flight/families").then(
        response => {
          console.log(response.data);
          this.TransArr = response.data;
        },
        response => {
          //失败分支
          console.log(response);
        }
      );
    },
    // 通勤航旅信息
    getTransMsg() {
      this.$http.get(this.myUrl + "transports").then(
        response => {
          this.TransMsgArr = response.data.content;
          this.TransAllMsg = response.data.content;
        },
        response => {
          //失败分支
          console.log(response);
        }
      );
    },
    cityTab(type, ind, params) {
      const agLen = arguments.length;
      const myFun = () => {
        if (type == "tours") {
          if (agLen == 1) {
            this.toursMsgArr = this.tourAllMsg;
            this.ind = -1;
            return;
          }
          this.ind = ind;
          this.loadShow=true;
          this.$http
            .get(this.myUrl + "tours?city=" + params + "&page=1&pageSize=7")
            .then(
              response => {
                this.toursMsgArr = response.data.content;
                this.loadShow=false;
              },
              response => {
                //失败分支
                console.log(response);
              }
            );
          return;
        }
        if (type == "transports") {
          if (agLen == 1) {
            this.TransMsgArr = this.TransAllMsg;
            this.Tind = -1;
            return;
          }
          this.Tind = ind;
          this.$http
            .get(
              this.myUrl + "transports?family=" + params + "&page=1&pageSize=7"
            )
            .then(
              response => {
                this.TransMsgArr = response.data.content;
              },
              response => {
                //失败分支
                console.log(response);
              }
            );
          return;
        }
      };
      myFun();
      // const transFun = agLen => {
      //   if (agLen == 1) {
      //     this.toursMsgArr = this.tourAllMsg;
      //     this.ind = -1;
      //     return;
      //   }
      //   this.ind = ind;
      //   this.$http
      //     .get(this.myUrl + "tours?city=" + city + "&page=1&pageSize=7")
      //     .then(
      //       response => {
      //         this.toursMsgArr = response.data.content;
      //       },
      //       response => {
      //         //失败分支
      //         console.log(response);
      //       }
      //     );
      // };
    }
  },
  mounted() {
    this.getBanner();
    this.tours();
    this.getToursMsg();
    this.getTransNav();
    this.getTransMsg();
  }
};
</script>


